page{
  width: 100vw;
  height: 100vh;
}
.category{
  width: 100%;
  height: 100%;
  .cates{
      display: flex;
      height: ~'calc(100vh - 130rpx)';
      //滚动区域的高度等于 视口 高度减去 顶部的搜索框的高度
      .left_menu_list{
          // flex 布局会默认继承父元素高度
          flex: 3;
          background-color: #F6F6F6;
          color: #9D9D9D;
          .menu_item{
              display: flex;
              justify-content: center;
              align-items: center;
              height: 80rpx;;
          }
          //点击左侧菜单时添加样式
          .active{
              border-left: 5rpx solid #EF250F;
              font-weight: bold;
              font-size: 32rpx;
              color: #000000;
          }
      }
      //右边内容区域样式
      .right_content{
          flex: 8;
          // padding-left: 30rpx;
          background-color: #ffffff;
          .a{
              height: 40rpx;
              width: 300rpx;
              // border: 1px solid black;
              display: -webkit-box;
              overflow: hidden;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1; 
              // 表示只显示两行，并且第二行超出部分显示... 
          }
          .aa{
            height: 130rpx;
            width: 300rpx;
            // border: 1px solid black;
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3; 
            // 表示只显示两行，并且第二行超出部分显示... 
        }
        .c{
          padding-right: 10rpx;
          padding-left: 10rpx;
        }

        // 暂无图书
        .text{
          width: 100%;
          height: 120rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          color: gray;
        }
      }
  }
}

